'use client'

import { ReactNode, useState } from 'react'
import { Box, useColorModeValue } from '@chakra-ui/react'

// 拖拽项类型
export type DraggableItemType = 'project' | 'chapter' | 'character' | 'folder'

interface DraggableItemProps {
  id: string;
  type: DraggableItemType;
  data: any;
  children: ReactNode;
}

export const DraggableItem = ({ 
  id, 
  type, 
  data, 
  children 
}: DraggableItemProps) => {
  const [isDragging, setIsDragging] = useState(false)
  
  // 拖拽开始时的处理函数
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
    // 设置拖拽的数据
    e.dataTransfer.setData('application/json', JSON.stringify({
      id,
      type,
      data
    }))
    
    // 设置允许的拖放效果
    e.dataTransfer.effectAllowed = 'copy'
    
    // 设置拖拽状态
    setIsDragging(true)
  }
  
  // 拖拽结束时的处理函数
  const handleDragEnd = () => {
    setIsDragging(false)
  }
  
  return (
    <Box
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      opacity={isDragging ? 0.6 : 1}
      cursor="grab"
      _active={{ cursor: 'grabbing' }}
      transition="opacity 0.2s, transform 0.2s"
      transform={isDragging ? 'scale(0.98)' : 'scale(1)'}
    >
      {children}
    </Box>
  )
} 